<template>
	<div id="BigBox">
		<shyt-table
			ref="shytTable"
			:columns="columns"
			:data="tableData"
			:auto-resize="true"
			:keep-source="true"
			:pager-config="pageConfig"
			:toolbar-config="toolbarConfig"
			:edit-config="{ trigger: 'dbclick', mode: 'row', showStatus: true }"
			element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.8)"
		>
			<!-- @page-change="pageChange" -->
			<template #codeName="{ row }">
				<span>{{ row.a }}</span>
			</template>
			<template #ApiCode="{ row }">
				<span>{{ row.b }}</span>
			</template>
			<template #Key="{ row }">
				<span>{{ row.c }}</span>
			</template>
			<template #usedFlag="{ row }">
				<el-switch
					v-model="row.d"
					active-value="0"
					inactive-value="1"
				></el-switch>
			</template>
			<!-- <template #expiryDate="{ row }"> </template> -->
			<template #edit="{ row }">
				<el-button type="text" size="small" @click="handlerEditRow(row)"
					>编辑</el-button
				>
				<el-button type="text" size="small" @click="deldectUser(row)"
					>删除</el-button
				>
			</template>
			<template #toolbar_buttons>
				<el-input
					v-model="userInput"
					class="user_input"
					placeholder="请输入查找的"
					size="medium"
				></el-input>
				<el-button type="primary" size="small" @click="handlerSave">
					查询
				</el-button>
				<el-button type="primary" size="small" @click="handlerAddClick">
					新增
				</el-button>
			</template>
		</shyt-table>
		<!-- 新增 -->
		<newService
			:dialog-table-visible="dialogTableVisible"
			@newlyClick="newlyClick"
		></newService>
		<!-- 编辑 -->
		<redactService
			:compile-dialog-table-visible="compileDialogTableVisible"
			:compile-row="compileRow"
			@compileClick="compileClick"
		></redactService>
	</div>
</template>

<script>
import newService from './components/newService.vue'
import redactService from './components/redactService.vue'
// import { sysFacApiPageList } from '@/http/api.js'
export default {
	name: 'ServiceApi',
	components: {
		newService,
		redactService,
	},
	data() {
		return {
			// 查询
			userInput: '',
			// 编辑
			compileRow: {},
			abc: '',
			// 新增弹框
			dialogTableVisible: false,
			compileDialogTableVisible: false,
			tableData: [
				{ a: 'name测试', b: '代码测试', c: 'Key测试', d: '0', e: '2021-10-31' },
			],
			columns: [
				{
					field: 'codeName',
					title: '名称',
					slots: { default: 'codeName' },
				},
				{
					field: 'ApiCode',
					title: 'API代码',
					slots: { default: 'ApiCode' },
				},
				{
					field: 'Key',
					title: 'APIKey',
					slots: { default: 'Key' },
				},
				{
					field: 'usedFlag',
					title: '是否启用',
					slots: { default: 'usedFlag' },
				},
				// {
				// 	field: 'expiryDate',
				// 	title: '失效时间',
				// 	slots: { default: 'expiryDate' },
				// },
				{
					title: '操作',
					slots: { default: 'edit' },
				},
			],
			toolbarConfig: {
				slots: {
					buttons: 'toolbar_buttons',
				},
			},
			//分页
			pageConfig: {
				currentPage: 1,
				pageSize: 10,
				pageSizes: [10, 20, 30, 50],
				total: 0,
				background: true,
				layouts: [
					'PrevPage',
					'JumpNumber',
					'NextPage',
					'FullJump',
					'Sizes',
					'Total',
				],
			},
		}
	},
	created() {
		// sysFacApiPageList({
		// 	pageNum: this.pageConfig.currentPage,
		// 	pageSize: this.pageConfig.pageSize,
		// }).then(({ data }) => {
		// 	console.log(data)
		// })
		// this.dataList(this.pageConfig.currentPage, this.pageConfig.pageSize)
	},
	methods: {
		// dataList(pageConfig, pageSize, inputCode) {
		// 	formulaParamConfig({
		// 		pageNum: pageConfig,
		// 		pageSize: pageSize,
		// 		inputCode: inputCode,
		// 	}).then(({ data }) => {
		// 		this.tableData = data.data.records
		// 		this.pageConfig.total = data.data.total
		// 		console.log(data.data)
		// 	})
		// },
		// 分页
		// pageChange({ currentPage, pageSize }) {
		// 	this.dataList(currentPage, pageSize, this.userInput.toUpperCase())

		// 	this.pageConfig.currentPage = currentPage
		// 	this.pageConfig.pageSize = pageSize
		// },
		// 查询
		handlerSave() {
			console.log('查询')
			// 	this.pageConfig.currentPage = 1
			// 	this.pageConfig.pageSize = 10
			// 	this.dataList(
			// 		this.pageConfig.currentPage,
			// 		this.pageConfig.pageSize,
			// 		this.userInput.toUpperCase(),
			// 	)
		},
		// 新增
		handlerAddClick() {
			this.dialogTableVisible = true
			console.log('新增')
		},

		// 编辑
		handlerEditRow(row) {
			this.compileDialogTableVisible = true
			this.compileRow = this._.cloneDeep(row)
			console.log(row, '编辑')
		},
		// 删除
		deldectUser(row) {
			console.log(row, '删除')
			this.$confirm('是否删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				// formulaDelete({ id: row.id }).then(({ data }) => {
				// 	console.log(data)
				// 	if (data.head.code == 200) {
				// 		this.$message({
				// 			type: 'success',
				// 			message: '删除成功!',
				// 		})
				// 		this.dataList(
				// 			this.pageConfig.currentPage,
				// 			this.pageConfig.pageSize,
				// 			this.userInput.toUpperCase(),
				// 		)
				// 	}
				// })
			})
		},

		// 新增弹框组件
		newlyClick(newly) {
			this.dialogTableVisible = newly.verdict
			// 	if (newly.typeValue == 1) {
			// 		setTimeout(() => {
			// 			this.dataList(1, 10)
			// 		}, 500)
			// 	}
		},
		// 编辑弹框组件
		compileClick(compile) {
			this.compileDialogTableVisible = compile.verdict
			// 	if (compile.typeValue == 1) {
			// 		setTimeout(() => {
			// 			this.dataList(
			// 				this.pageConfig.currentPage,
			// 				this.pageConfig.pageSize,
			// 				this.userInput.toUpperCase(),
			// 			)
			// 		}, 500)
			// 	}
		},
	},
}
</script>

<style lang="scss" scoped>
.user_input {
	width: 200px;
}
</style>
